import MenuItem from '@material-ui/core/MenuItem';
import Select from '@material-ui/core/Select';
import InputLabel from '@material-ui/core/InputLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControl from '@material-ui/core/FormControl';
import React, { useState, useEffect } from 'react';
import { makeStyles } from '@material-ui/core/styles';
import { obj_str, is_empty } from 'sui';

const useStyles = makeStyles((theme) => ({
    formControl: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1),
        minWidth: 220,
    },
    normal: {
        marginTop: theme.spacing(2),
        marginBottom: theme.spacing(1),
        minWidth: 220,
    },
}));

/* lst = [
 *   {id: "xx", des: "xx"}
 * ]
*/
const IkSelect = ({ form, value, label, lst, name, className, st="formControl", mg, disabled=false }) => {
    const [err, setErr] = useState(false);
    const [err_txt, errTxt] = useState("");
    const [val, setVal] = useState("");
    const classes = useStyles();

    useEffect(() => {
        const e = obj_str(form.err, name);
        if (e === err_txt) {
            return;
        }

        if (e) {
            setErr(true);
            errTxt(e);
        }
        else {
            setErr(false);
            errTxt("");
        }
    }, [name, form.err, err_txt]);

    useEffect(() => {
        const e = obj_str(value, name);
        if (val === e) {
            return;
        }

        setVal(e);
    }, [name, value, val]);

    const item = () => {
        if (is_empty(lst)) {
            return null;
        }

        return lst.map(d => <MenuItem key={d.id} value={d.id}>{d.des}</MenuItem>);
    };

    return (
        <div className={className}>
            <FormControl variant="outlined" className={classes[st]} error={err} disabled={disabled}>
                <InputLabel margin={mg}>{label}</InputLabel>
                <Select
                    margin={mg}
                    value={val}
                    name={name}
                    label={label}
                    onChange={event => form.hcmd(name, event.target.value)}>
                    {item()}
                </Select>
                <FormHelperText>{err_txt}</FormHelperText>
            </FormControl>
        </div>
    );
};

const Iselect = ({ setValue, value, label, lst, name, className, st="formControl", mg="dense" }) => {
    const classes = useStyles();

    const item = () => {
        if (is_empty(lst)) {
            return null;
        }

        return lst.map(d => <MenuItem key={d.id} value={d.id}>{d.des}</MenuItem>);
    };

    return (
        <div className={"mt-1 " + className}>
            <FormControl variant="outlined" className={classes[st]}>
                <InputLabel margin={mg}>{label}</InputLabel>
                <Select
                    margin={mg}
                    value={value}
                    name={name}
                    label={label}
                    onChange={event => setValue(event.target.value)}>
                    {item()}
                </Select>
            </FormControl>
        </div>
    );
};

export {Iselect, IkSelect};
